<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('标签数据列表')" />
	<link href="/css/swiper.min.css" rel="stylesheet"/>
</head>
<style type="text/css">
	.fixed-table-pagination{
		display:none !important;
	}
</style>
<style>
	body {
		font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		font-size: 14px;
		margin: 0;
		padding: 0;
	}
	#swiper-history {
		width: 30%;
		max-width: 820px;
		position: relative;
	}
	#swiper-history .swiper-container {
		height: 144px;
		margin: 0 40px;
	}
	#swiper-history .short-line {
		height: 72px;
		border-bottom: 1px dashed #76fffa;
		width: 30px;
		position: absolute;
		top: 0px;
	}
	#swiper-history .long-line {
		height: 72px;
		border-bottom: 1px solid #007aff;
		width: 100%;
		position: absolute;
		top: 0px;
		left: 30px;
	}
	#swiper-history .swiper-slide span {
		display: block;
		width: 100%;
		text-align: center;
		position: absolute;
		transition: 700ms;
	}
	#swiper-history .swiper-slide .detail {
		height: 20px;
		line-height: 20px;
		top: 27px;
		color: #444;
		opacity: 0;
	}
	#swiper-history .swiper-slide .date {
		color: #000000;
		position: absolute;
		bottom: 33px;
		opacity: 0;
	}
	#swiper-history .swiper-slide-active span {
		transition: 700ms 700ms;
	}
	#swiper-history .swiper-pagination-bullets {
		white-space: nowrap;
		width: auto;
		bottom: 67px;
		height: 10px;
		line-height: 10px;
		transition: 700ms;
	}
	#swiper-history .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
		margin: 0;
	}
	#swiper-history .swiper-pagination-bullet {
		background: #fff;
		border: 1px solid #007aff;
		opacity: 1;
		line-height: 10px;
	}
	#swiper-history .swiper-pagination-bullet-active {
		background: #007aff;
	}
	#swiper-history .swiper-button-next, #swiper-history .swiper-button-prev {
		background-size: 10px auto;
	}
</style>
<body class="gray-bg">
    
     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>
							<li>
								标签ID：<input type="text" id="tagId" name="tagId"/>
							</li>

<!--							<li>-->
<!--								数据产生时间：<input type="text" name="lastPacketTS"/>-->
<!--							</li>-->
							<li>
								rssi基站ID：<input type="text" id="rssiLocator" name="rssiLocator"/>
							</li>

							<li>
								报警状态：<input type="text" id="status" name="status"/>
							</li>

							<li>
								传感类型：<input type="text" id="sensorType" name="sensorType"/>
							</li>

							<li>
								人员ID：<input type="text" id="personId" name="personId"/>
							</li>

<!--							<li class="select-time">-->
<!--								<label>创建时间： </label>-->
<!--								<input type="text" id="startTime" class="time-input"  placeholder="开始时间" name="params[startTime]"/>-->
<!--								<span>-</span>-->
<!--								<input type="text" id="endTime"  class="time-input"  placeholder="结束时间" name="params[endTime]"/>-->
<!--							</li>-->
							<li class="select-time new">
								<label class="font-noraml">创建时间：</label>
								<div class="input-daterange input-group">
									<input type="text" class="input-sm form-control" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
									<span>-</span>
									<input type="text" class="input-sm form-control" id="endTime" placeholder="结束时间"  name="params[endTime]"/>
								</div>
							</li>
							<input type="hidden" name="tableName"/>
							<input type="hidden" name="index"/>
							<input type="hidden" name="pageSize"/>
							<input type="hidden" name="totalCount"/>
							<input type="hidden" name="nowPage"/>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
	        <div class="btn-group-sm" id="toolbar" role="group">
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
				<div class="fixed-table-pagination1" style="display: block;">
					<div id="swiper-history" style="float: left">
						<div class="swiper-container">
							<div class="swiper-pagination">
							</div>
							<div class="swiper-wrapper">
							</div>
							<div class="short-line">
							</div>
							<div class="long-line">
							</div>
						</div>
						<div class="swiper-button-prev">
						</div>
						<div class="swiper-button-next">
						</div>
					</div>

					<div class="pull-right pagination">
					<ul class="pagination pagination-outline">
						<li><a href="#" onclick="previousPage()">上一页</a></li>
						<li><a href="#" onclick="nextPage()">下一页</a></li>
						<li class="pageGo"><input type="text" id="pageNum" class="form-control" value="1">
							<button class="btn btn-default btn-outline" onclick="goTo()" title="跳转" type="button">跳转</button>
						</li>
					</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
	 <script src="/ajax/libs/swiper/swiper.min.js"></script>
	 <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('system:tagData:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:tagData:remove')}]];
        var prefix = ctx + "system/tagData";
		var param = {
			"tagId":null,
			"rssiLocator":null,
			"status":null,
			"sensorType":null,
			"personId":null,
			"beginTime":null,
			"endTime":null,
			"tableName":null,
			"index":null,
			"pageSize":10,
			"nowPage":1,
			"total":null
		}
		var modifier=2;//每天的px
		var historyList=[];
		var mySwiper =null;
		var swiper;
        $(function() {
			$('input:not([autocomplete]),textarea:not([autocomplete]),select:not([autocomplete])').attr('autocomplete', 'off');
			$('#bootstrap-table').bootstrapTable({
				ajax : function (request) {
					$.ajax({
						type : "post",
						url :prefix + "/list",
						// contentType: "application/json;charset=utf-8",
						dataType:"json",
						data:param,
						jsonp:'callback',
						success : function (msg) {
							request.success({
								row : msg.rows
							});
							param.nowPage = msg.nowPage;
							param.index=msg.index;
							param.tableName=msg.tableName;
							param.total=msg.total;
							// var historyList ="";
							var nowTable = msg.tableName.substring(9,17);
							var dateList = msg.dateList;
							var ind = null;
							if (dateList.length>0){
								for (var i=0;i<dateList.length;i++){
									var str = {"detail":"","date":null};
									if (nowTable ==dateList[i] ) {
										str.detail="第"+msg.nowPage+"页，共"+msg.total+"条记录";
										str.date=dateList[i];
										ind =i;
									}else {
										str.detail="";
										str.date=dateList[i];
									}
									historyList.push(str);
								}
							}
							$('#bootstrap-table').bootstrapTable('load', msg.rows);
							// $("#paginationInfo").text("日期："+msg.tableName.substring(9,17)+"，共  "+msg.total+" 条记录。");
							 mySwiper = new Swiper('#swiper-history .swiper-container',{
								virtualTranslate : true,
								preventClicks : false,
								prevButton:'#swiper-history .swiper-button-prev',
								nextButton:'#swiper-history .swiper-button-next',
								pagination:'#swiper-history .swiper-pagination',
								paginationClickable:true,
								 preventClicksPropagation : false,
								paginationBulletRender: function (swiper, index, className) {
									var marginLeft = 30;
									return '<span class="' + className + '" style="margin-left:'+marginLeft+'px;"></span>';
								},
								onInit: function(swiper){
									mySlides='';
									var j = 1;
									swiper.removeAllSlides();
									swiper.appendSlide('<div id = "swiperDiv">');
									for(var i = 0;i<historyList.length;i++){
										if (historyList[i]['detail']!=null&&historyList[i]['detail']!=""){
											j=i;
										}
										swiper.appendSlide('<div class="swiper-slide slide'+i+'"><span class="detail">'+historyList[i]['detail']+'</span><span class="date">'+historyList[i]['date']+'</span></div>');
										swiper.slides[i].style.transform='translate3d(' + (-i)*swiper.width + 'px, 0px, 0px)';
									}
									swiper.appendSlide('</div>');
									swiper.slideTo(j);
									detailActive=swiper.slides[swiper.activeIndex].querySelector('.detail');
									dateActive=swiper.slides[swiper.activeIndex].querySelector('.date')
									detailActive.offsetHeight;dateActive.offsetHeight;
									swiper.slides[swiper.activeIndex].style.zIndex=999;
									detailActive.style.opacity=dateActive.style.opacity=1;
									detailActive.style.transform='translate3d(0px, 10px, 0px)';
									dateActive.style.transform='translate3d(0px, -10px, 0px)';
								},
								onSlideChangeStart: function(swiper){
									detailPrev=swiper.slides[swiper.previousIndex].querySelector('.detail');
									datePrev=swiper.slides[swiper.previousIndex].querySelector('.date');
									detailPrev.offsetHeight;datePrev.offsetHeight;
									swiper.slides[swiper.previousIndex].style.zIndex=1;
									detailPrev.style.opacity=datePrev.style.opacity=0;
									detailPrev.style.transform=datePrev.style.transform='translate3d(0px, 0px, 0px)';

									detailActive=swiper.slides[swiper.activeIndex].querySelector('.detail');
									dateActive=swiper.slides[swiper.activeIndex].querySelector('.date')
									detailActive.offsetHeight;dateActive.offsetHeight;
									swiper.slides[swiper.activeIndex].style.zIndex=999;
									detailActive.style.opacity=dateActive.style.opacity=1;
									detailActive.style.transform='translate3d(0px, 10px, 0px)';
									dateActive.style.transform='translate3d(0px, -10px, 0px)';

									// var moveDay1 = historyList[swiper.activeIndex]['date'];
								},
								 onClick: function(swiper){
									 var date = historyList[swiper.activeIndex]['date'];
									 // var table = "tag_Data_"+date;
									 var j = 0;
									 for (var i =0;i<historyList.length;i++){
										var tab= historyList[i]['date'];
										if (tab==date) {
											j=i;
										}
									 }
									 param.index = j;
									 param.nowPage = 1;//查询下一张表，当前页重置为1
									 query();
								 },
							});
						},
						error:function(swiper){
							alert("错误");
						}
					});
				},
				columns: [
					{
						title: "序号",
						formatter: function (value, row, index) {
							var table = $('#bootstrap-table').bootstrapTable('getOptions');
							var pageSize = table.pageSize;
							var pageNumber = table.pageNumber;
							return pageSize * (pageNumber - 1) + index + 1;
						}
					},
					{
						field : 'id',
						title : 'ID',
						visible: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'tagId',
						title : '标签ID',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'positionTS',
						title : '位置信息时间',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'lastPacketTS',
						title : '数据产生时间',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'x,y,z',
						title : '位置坐标',
						sortable: true,
						visible: true,
						formatter:function (value,row,index) {
							var html ="<span style='white-space:nowrap'></span><span>"+row.x+",</span><span>"+row.y+",</span><span>"+row.z+"</span></span>"
							return html;
						}
					},
					{
						field : 'batteryVoltage',
						title : '电池电量',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'batteryVoltageTS',
						title : '电池电量对应的时间',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'rssi',
						title : '信号强度',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'rssiLocator',
						title : 'rssi基站ID',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'status',
						title : '报警状态',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'sensorType',
						title : '传感类型',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'sensorData',
						title : '心率值',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'pressureValue ',
						title : '血压值',
						sortable: false,
						formatter: function(value, row, index) {
							value ='-';
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'personId',
						title : '人员ID',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					},
					{
						field : 'createTime',
						title : '创建时间',
						sortable: false,
						formatter: function(value, row, index) {
							var html ="<span style='white-space:nowrap'>"+value+"</span>"
							return html;
						}
					}
				]
			});
		})
		$(".swiper-button-next").on("click",function () {
			var index =param.index;
			if (index<historyList.length){
				param.index = index+1;
				param.nowPage = 1;//查询下一张表，当前页重置为1
				query();
			}
		})
		$(".swiper-button-prev").on("click",function () {
			var index =param.index;
			if (index>0){
				param.index = index-1;
				param.nowPage = 1;//查询下一张表，当前页重置为1
				query();
			}
		})
		function searchData() {
			param.nowPage=1;
			param.index=null;
			query();
			// param.pageSize=10;
		}
		function query() {
			var tagId = $("#tagId").val();
			var rssiLocator = $("#rssiLocator").val();
			var status = $("#status").val();
			var sensorType = $("#sensorType").val();
			var personId = $("#personId").val();
			var beginTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			param.tagId = tagId;
			param.rssiLocator = rssiLocator;
			param.status=status;
			param.sensorType=sensorType;
			param.personId=personId;
			param.beginTime=beginTime;
			param.endTime=endTime;
			$.ajax({
				type : "post",
				url :prefix + "/list",
				// contentType: "application/json;charset=utf-8",
				dataType:"json",
				data:param,
				jsonp:'callback',
				success : function (msg) {
					// request.success({
					// 	row : msg.rows
					// });
					param.nowPage = msg.nowPage;
					param.index=msg.index;
					param.tableName=msg.tableName;
					param.total=msg.total;
					// $('#bootstrap-table').bootstrapTable('load', msg.rows);
					var nowTable = msg.tableName.substring(9,17);
					var dateList = msg.dateList;
					var ind = null;
					historyList=[];
					$("#swiperDiv").innerHTML="";
					if (dateList.length>0){
						for (var i=0;i<dateList.length;i++){
							// historyList[i]="{'detail':'第3页，共10000条记录','date':'"+dateList[i]+"'},";
							// historyList[i].detail="";
							// historyList[i].date=dateList[i];
							var str = {"detail":"","date":null};
							if (nowTable ==dateList[i] ) {
								str.detail="第"+msg.nowPage+"页，共"+msg.total+"条记录";
								str.date=dateList[i];
								ind =i;
							}else {
								str.detail="";
								str.date=dateList[i];
							}
							historyList.push(str);
						}
					}
					$('#bootstrap-table').bootstrapTable('load', msg.rows);
					// $("#paginationInfo").text("日期："+msg.tableName.substring(9,17)+"，共  "+msg.total+" 条记录。");
					mySwiper.init().onInit();
				},
				error:function(){
					alert("错误");
				}
			});
		}
		function previousPage() {
			var nowPage = param.nowPage;
			var pageSize = param.pageSize;
			var totalCount = param.total;//获取总数
			//判断当前页码是否为最后一页
			// 计算能分多少页
			var pageCount =totalCount % pageSize == 0 ? totalCount / pageSize : Math.ceil(totalCount / pageSize) ;
			if (nowPage==1) {
				var index =param.index;
				if (index!=null&&index!=0){
					param.index = index-1;
					param.nowPage = 1;//查询下一张表，当前页重置为1
				}
			}else{
				param.nowPage =nowPage-1;
			}
			query();

		}
		function nextPage() {
			var nowPage = param.nowPage;
			var pageSize = param.pageSize;
			var totalCount = param.total;//获取总数
			//判断当前页码是否为最后一页
			// 计算能分多少页
			var pageCount =totalCount % pageSize == 0 ? totalCount / pageSize : Math.ceil(totalCount / pageSize) ;
			if (nowPage>=pageCount) {
				var index =param.index;
				param.index = index+1;
				param.nowPage = 1;//查询下一张表，当前页重置为1
			}else{
				param.nowPage =nowPage+1;
			}
			query();
		}
		function goTo() {
			var pageNum = $("#pageNum").val();
			var pageSize = param.pageSize;
			var totalCount = param.total;//获取总数
			// 计算能分多少页
			var pageCount =totalCount % pageSize == 0 ? totalCount / pageSize : Math.ceil(totalCount / pageSize) ;
			// param.nowPage = pageNum;
			if (pageNum>pageCount) {
				param.nowPage = pageCount;
			}else if (pageNum<1) {
				return ;
			}else {
				param.nowPage = pageNum;
			}
			query();
		}
    </script>
</body>
</html>